import React, { useState, ChangeEvent } from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';

import { AutoComplete, AutoCompleteProps, DataSourceType } from './autoComplete';

export default {
  title: 'Example/AutoComplete',
  component: AutoComplete,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as Meta;
const Template: Story<AutoCompleteProps> = (args) => {
  
  const lakers = ['bradley', 'pope', 'caruso', 'cook', 'cousins', 'james', 'AD', 'green', 'howard', 'kuzma', 'McGee', 'rando']
   const lakersWithNumber = [
    {value: 'bradley', number: 11},
    {value: 'pope', number: 1},
    {value: 'caruso', number: 4},
    {value: 'cook', number: 2},
    {value: 'cousins', number: 15},
    {value: 'james', number: 23},
    {value: 'AD', number: 3},
    {value: 'green', number: 14},
    {value: 'howard', number: 39},
    {value: 'kuzma', number: 0},
  ]
  const [value, setValue] = useState();
  const handleFetch = (query: string) => {
    console.log("触发请求", query);
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(lakersWithNumber)
      }, 2000);
    });
    return lakersWithNumber.filter(player => player.value.includes(query))
  }

  return <AutoComplete
    {...args}
    fetchSuggestions={handleFetch}
    value={value}
  />;
}


export const ShowAutoComplete = Template.bind({});
ShowAutoComplete.args = {
  renderOption: item => (<>
    <span>{item.value}</span>
  {/* <span>{ item.number }</span> */}
  </>),
  onSelect: (item) => alert(item.value),
}